<template>
  <div style="width: 100%">
    <div class="file_part">
      <div class="file_head_div">
        <div class="file_head_title">
          <a-icon type="profile" :style="{ color: '#08c', marginRight: '10px' }" />
          材料清单
        </div>
        <div class="file_head_btn">
          <a-button
            type="primary"
            icon="plus"
            class="add_btn btn_primary_color"
            style="margin-right: 20px"
            @click="handleAdd"
          >
            新增材料
          </a-button>
          <a-button
            type="primary"
            class="btn_primary_color"
            @click="openReview(null)"
            v-show="btnShow && isShowTypical"
            style="margin-right: 20px"
          >
            材料审查
          </a-button>
          <a-button
            type="primary"
            class="btn_primary_color"
            :loading="btnLoading"
            @click="completeToNext()"
            v-if="category == 'evidence' && isEdit"
            style="margin-right: 20px"
          >
            审查完成
          </a-button>
          <a-tooltip v-show="btnShow">
            <template slot="title"> 一键下载所有的材料附件 </template>
            <a-button type="primary" icon="download" class="btn_primary_color" @click="downloadMaterialAll">
              一键下载
            </a-button>
          </a-tooltip>
        </div>
      </div>
      <a-divider></a-divider>
      <component
        ref="component"
        :is="component"
        :applyid="applyid"
        :tabLists="tabLists"
        @openReview="openReview"
        @changeShow="changeShow"
      />
    </div>

    <div class="file_part">
      <div class="file_head_div">
        <div class="file_head_title">
          <a-icon type="profile" :style="{ color: '#08c', marginRight: '10px' }" />
          人员材料
        </div>
      </div>
      <a-divider></a-divider>
      <component
        ref="componentPersonRef"
        :is="componentPerson"
        :applyid="applyid"
        :tabLists="tabLists"
        @openReview="openReview"
        @changeShow="changeShow"
      />
    </div>

    <a-drawer
      :visible="visible"
      @close="onClose"
      :closable="false"
      destroyOnClose
      width="100%"
      :bodyStyle="{ padding: '5px' }"
    >
      <component
        :is="componentReview"
        :applyid="applyid"
        :isEdit="isEdit"
        :isShowTypical="isShowTypical"
        :selectData="selectData"
        @onClose="onClose"
      />
    </a-drawer>
  </div>
</template>

<script>
import { downloadMaterialAll } from '@/api/apply/apl_matter_attach'
import { downloadFile } from '@/utils/util'
import { completeToNext } from '@/api/supervise/businesssupervise.js'
import storage from 'store'
import { APP_USER } from '@/store/mutation-types.js'
export default {
  props: {
    applyid: {
      // 申请id
      type: String,
      required: true
    },
    taskid: {
      // 任务id
      type: String,
      required: true
    },
    isEdit: {
      // 是否可编辑
      type: Boolean,
      required: true
    },
    tabLists: {
      // 渲染的tabs
      type: Array,
      required: true
    },
    // 流程变量
    category: {
      type: String,
      required: false
    },
    isShowTypical: {
      // 是否显示典型案例
      type: Boolean,
      required: false,
      default: true
    }
  },
  data () {
    return {
      materialList: [
        { name: '材料清单', viewname: 'OtherMaterials' },
        { name: '人员材料', viewname: 'PersonMaterials' }
      ],
      tabActive: '',
      visible: false,
      component: null, // 材料列表组件
      componentPerson: null, // 人员材料组件
      componentReview: null, // 审查材料组件
      btnShow: true,
      selectData: null, // 选中的材料数据
      btnLoading: false,
      currentUser: storage.get(APP_USER) // 登录人信息
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      this.tabActive = this.materialList[0].viewname
      this.initComponent()
    },
    openReview (data) {
      // this.componentReview = () => import(`@/views/materials/${this.tabActive}Review`)
      this.componentReview = () => import(`@/views/materials/SubmitMaterialReview`)
      this.visible = true
      if (data && data.selectData) {
        this.selectData = data.selectData
      }
      this.$emit('openReview')
    },
    onClose () {
      this.visible = false
      this.$refs.component.init()
      this.$emit('onClose')
    },
    initComponent () {
      this.component = () => import('@/views/materials/OtherMaterials')
      this.componentPerson = () => import('@/views/materials/PersonMaterials')
    },
    changeShow (e) {
      this.btnShow = e
    },
    downloadMaterialAll () {
      this.$confirm({
        title: '提示',
        content: '确定下载所有的材料附件吗？',
        onOk: () => {
          this.$message.loading({
            content: '材料下载中...',
            key: 'fileDownload',
            duration: 0
          })
          downloadMaterialAll({ applyid: this.applyid })
            .then(res => {
              downloadFile(res, this.applyid + '.zip')
              this.$message.success({
                content: '材料下载成功',
                key: 'fileDownload',
                duration: 2
              })
            })
            .catch(function (err) {
              console.log(err)
            })
        }
      })
    },
    handleAdd () {
      this.$refs.component.handleAdd()
    },
    // 整改完成
    completeToNext () {
      this.btnLoading = true
      completeToNext(this.applyid, this.taskid, this.currentUser.userId)
        .then(res => {
          if (res.code == 0) {
            this.$message.success('审查成功')
            // 跳转到上一级页面
            this.$router.push({
              path: '/SuperviseTodo/'
            })
          } else {
            this.$message.error('审查失败')
          }
        })
        .finally(() => {
          this.btnLoading = false
        })
    }
  }
}
</script>

<style scoped>
.file_part {
  /* margin: 16px 0px 32px 0px; */
  padding: 20px 10px 0px 20px;
}
.file_head_div {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.file_head_title {
  display: flex;
  align-items: center;
  width: 40%;

  font-family: PingFang SC;
  font-weight: bold;
  font-size: 18px;
  color: #000000;
  line-height: 5px;
}
.file_head_btn {
  display: flex;
  justify-content: flex-end;
  align-self: flex-end;
  width: 60%;
}
::v-deep .ant-table-thead > tr > th {
  background: #f2f8fc;
}
</style>
